@extends('student._layouts.app')

@section('css')
    <style>
        .input-area {
            position: absolute;
            top: 200px;
            width: 100%;
            height: 200px;
            overflow: auto;
        }

        .input {
            display: block;
            width: 205px;
            height: 70px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 0 20px 20px;
            font-size: 56px;
            outline: none;
            border: none;
            letter-spacing:20px;
        }

        .no-attendance {
            width: 100%;
            height: 200px;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            color: #818181;
        }
    </style>
@endsection


@section('content')
    <section class="tabs">
        <a class="tab" href="/student/class/{{ $classId }}">留言</a>
        <a class="tab" href="/student/class/{{ $classId }}/work">作业</a>
        <a class="tab active">签到</a>
    </section>
    <section class="input-area">
        @if($attendanceStatus)
            <input type="text" class="input" v-model="code" maxlength="4">
        @else
            <section class="no-attendance">
            暂无发布考勤
            </section>
        @endif
    </section>

@endsection

@section('js')
    <script src="{{ asset('js/vue.dev.js') }}"></script>
    <script src="{{ asset('js/axios.dev.js') }}"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                code: '',
            },
            watch: {
                code() {
                    if (this.code.length === 4) {
                        this.verify()
                    }
                }
            },
            methods: {
                verify() {
                    let that = this
                    axios({
                        method: 'post',
                        url: '/student/verifycode',
                        timeout: 2000,
                        data: {
                            code: that.code,
                            attendance_id: '{{ $attendanceId }}',
                            class_id: '{{ $classId }}'
                        }
                    })
                    .then(function (response) {
                        alert(response.data.message)
                        that.code = ''
                        if (response.data.code === 200) {
                            window.location.reload()
                        }

                    })
                    .catch(function (response) {
                        console.log(response)
                    })
                }


            }

        })

    </script>
@endsection